<template>
  <div id="tags-view-container" class="tags-view-container">
    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
      <router-link
        v-for="tag in visitedViews"
        ref="tag"
        :key="tag.path"
        :class="isActive(tag)?'active':''"
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
        tag="span"
        class="tags-view-item" >{{ tag.name}}
        <!--@click.middle.native="closeSelectedTag(tag)"-->
        <!--@contextmenu.prevent.native="openMenu(tag, $event)"-->
        <span v-if="!tag.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
      </router-link>
    </scroll-pane>
    <!--<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="context-menu">-->
      <!--<li @click="refreshSelectedTag(selectedTag)"> 刷新 </li>-->
      <!--<li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)"> 关闭 </li>-->
      <!--<li @click="closeOthersTags">-->
        <!--关闭其他-->
      <!--</li>-->
      <!--<li @click="closeAllTags(selectedTag)">-->
        <!--关闭全部-->
      <!--</li>-->
    <!--</ul>-->
  </div>
</template>

<script>
import ScrollPane from './ScrollPane'
// import { generateTitle } from '@/utils/i18n'
import path from 'path'
import { mapGetters, mapActions } from 'vuex'

export default {
  components: { ScrollPane },
  data () {
    return {
      visible: false,
      top: 0,
      left: 0,
      selectedTag: {},
      affixTags: []
    }
  },
  computed: {
    ...mapGetters({
      visitedViews: 'getVisitedViews',
      routes: 'accessedRouters'
    })
  },
  watch: {
    $route () {
      this.addTags()
      this.moveToCurrentTag()
      console.log('watch $route', this.visitedViews)
    },
    visible (value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  },
  mounted () {
    this.initTags()
    this.addTags()
  },
  methods: {
    ...mapActions([
      'ADD_VISITED_VIEW', 'UPDATE_VIEW', 'DEL_VIEW'
    ]),
    // generateTitle, // generateTitle by vue-i18n
    isActive (route) {
      return route.path === this.$route.path
    },
    filterAffixTags (routes, basePath = '/') {
      let tags = []
      routes.forEach(route => {
        if (route.affix) {
          const tagPath = path.resolve(basePath, route.path)
          tags.push({
            fullPath: tagPath,
            path: tagPath,
            name: route.name,
            affix: true
          })
        }
        if (route.children) {
          const tempTags = this.filterAffixTags(route.children, route.path)
          if (tempTags.length >= 1) {
            tags = [...tags, ...tempTags]
          }
        }
      })
      return tags
    },
    initTags () {
      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
      for (const tag of affixTags) {
        if (tag.name) {
          this.ADD_VISITED_VIEW(tag)
        }
      }
    },
    addTags () {
      if (this.$route.name) {
        this.ADD_VISITED_VIEW(this.$route)
      }
    },
    moveToCurrentTag () {
      const tags = this.$refs.tag
      this.$nextTick(() => {
        for (const tag of tags) {
          if (tag.to.path === this.$route.path) {
            this.$refs.scrollPane.moveToTarget(tag)
            if (tag.to.fullPath !== this.$route.fullPath) {
              this.UPDATE_VIEW(this.$route)
            }
            break
          }
        }
      })
    },
    closeSelectedTag (view) {
      this.DEL_VIEW(view).then(({ visitedViews }) => {
        if (this.isActive(view)) {
          this.toLastView(visitedViews, view)
        }
      })
    },
    toLastView (visitedViews, view) {
      const latestView = visitedViews.slice(-1)[0]
      if (latestView) {
        this.$router.push(latestView)
      } else {
        this.$router.push('/')
      }
    }
    // refreshSelectedTag (view) {
    //   const { fullPath } = view
    //   this.$router.replace({
    //     path: fullPath
    //   })
    // },
    // closeOthersTags () {
    //   this.$router.push(this.selectedTag)
    //   this.$store.dispatch('delOthersViews', this.selectedTag).then(() => {
    //     this.moveToCurrentTag()
    //   })
    // },
    // closeAllTags (view) {
    //   this.$store.dispatch('delAllViews').then(({ visitedViews }) => {
    //     if (this.affixTags.some(tag => tag.path === view.path)) {
    //       return
    //     }
    //     this.toLastView(visitedViews, view)
    //   })
    // },

    // openMenu (tag, e) {
    //   // TODO 右键
    //   const menuMinWidth = 105
    //   const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
    //   const offsetWidth = this.$el.offsetWidth // container width
    //   const maxLeft = offsetWidth - menuMinWidth // left boundary
    //   const left = e.clientX - offsetLeft + 15 // 15: margin right
    //
    //   if (left > maxLeft) {
    //     this.left = maxLeft
    //   } else {
    //     this.left = left
    //   }
    //
    //   this.top = e.clientY
    //   // this.visible = true
    //   this.selectedTag = tag
    // },
    // closeMenu () {
    //   this.visible = false
    // }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "assets/styles/tags-view.scss";
</style>
